<template>
  <div class="container">
    <el-row type="flex" justify="space-between">
      <div style="display:inline-flex;flex:1;align-items: center">
        <el-button @click="exportExcel" type="success" icon="el-icon-download">导出</el-button>
      </div>
      <div>
        <div style="margin-bottom: 10px;display:flex; justify-content: flex-end;align-items: center">
          <el-select id="netCode" v-model="form.selectNetCode" placeholder="请选择台网" :class="netCodeNull ? 'selectNull' : ''"
                     style="margin-left: 1%;width: 24%" @change="changeNetCode" filterable multiple collapse-tags>
            <el-checkbox
              v-model="netCodeChecked"
              @change='selectAllNetCode'
              style="margin-left:20px">
              全选
            </el-checkbox>
            <el-option v-for="item in netCodeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="form.selectStaType" placeholder="请选择台站类型" :class="staTypeNull ? 'selectNull' : ''"
                     style="margin-left: 1%;width: 24%" @change="changeStaType" filterable multiple collapse-tags>
            <el-checkbox
              v-model="staTypeChecked"
              @change='selectAllStaType'
              style="margin-left:20px">
              全选
            </el-checkbox>
            <el-option v-for="item in staTypeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="form.selectChanNum" placeholder="请选择位置号" :class="chanNumNull ? 'selectNull' : ''"
                     style="margin-left: 1%;width: 24%;" @change="changeChanNum" filterable multiple collapse-tags>
            <el-checkbox
              v-model="chanNumChecked"
              @change='selectAllChanNum'
              style="margin-left:20px">
              全选
            </el-checkbox>
            <el-option v-for="item in chanNumOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="form.selectChanCode" placeholder="请选择通道码" :class="chanCodeNull ? 'selectNull' : ''"
                     style="margin-left: 1%;width: 24%;" @change="changeChanCode" filterable multiple collapse-tags>
            <el-checkbox
              v-model="chanCodeChecked"
              @change='selectAllChanCode'
              style="margin-left:20px">
              全选
            </el-checkbox>
            <el-option v-for="item in chanCodeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="display:flex; justify-content: flex-end;align-items: center">
          <el-date-picker
            :class="dateNull ? 'inputNull' : ''"
            @change="ruleInput(1)"
            v-model="form.date"
            style="margin-left: 1%;width: 42%;"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <span style="font-size: 14px;margin-left: 1%;width: 6%">总次数: </span>
          <el-input v-model="form.errorTimesSumThreshold" style="width: 22%" class="input-with-select" @change="ruleInput(2)"
                    :class="errorTimesSumNull ? 'inputNull' : ''" type="number">
            <el-select v-model="form.errorTimesSumLessThanSymbol" slot="prepend" placeholder="阈值" style="width: 110px">
              <el-option label="大于等于" value="大于等于"></el-option>
              <el-option label="小于等于" value="小于等于"></el-option>
            </el-select>
          </el-input>
          <span style="font-size: 14px;margin-left: 1%;width: 8%">异常次数: </span>
          <el-input v-model="form.continuousErrorTimesThreshold" style="width: 22%" class="input-with-select" @change="ruleInput(3)"
                    :class="continuousErrorTimesNull ? 'inputNull' : ''" type="number">
            <el-select v-model="form.continuousErrorTimesLessThanSymbol" slot="prepend" placeholder="阈值" style="width: 110px">
              <el-option label="大于等于" value="大于等于"></el-option>
              <el-option label="小于等于" value="小于等于"></el-option>
            </el-select>
          </el-input>
          <span style="font-size: 14px;margin-left: 1%;width: 8%">连续天数: </span>
          <el-input-number v-model="form.daysThreshold" style="width: 16%" class="input-with-select" @change="ruleInput(4)"
                           :class="daysNull ? 'numberNull' : ''" controls-position="right" :min='1'>
          </el-input-number>
        </div>
      </div>
      <div style="display:flex; justify-content: flex-end;flex:2;align-items: center" >
        <el-button style="margin-left: 10px" @click="queryData" type="primary" icon="el-icon-search">查询</el-button>
        <el-button style="margin-left: 10px" @click="clearFn" type="danger" icon="el-icon-delete">清除</el-button>
      </div>
    </el-row>

    <el-table :data="tableData" style="width: 100%;margin-top:15px;" border :cell-style="cellStyle" :row-style="{height:'40px'}"
              v-loading="tableLoading" element-loading-text="数据加载中，请耐心等待......" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.6)">
    <el-table-column prop="netCode" label="台网名称" align="center" fixed>
      </el-table-column>
      <el-table-column prop="staCode" label="台站名称" align="center">
      </el-table-column>
      <el-table-column prop="staType" label="台站类型" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="chanNum" label="通道号" align="center">
      </el-table-column>
      <el-table-column prop="chanCode" label="通道代码" align="center">
      </el-table-column>
      <el-table-column :label="item" align="center" show-overflow-tooltip v-for="(item, index) in tableTitle" :key="index">
        <template slot-scope="scope">
          {{scope.row.dataList[index].times}}
        </template>
      </el-table-column>
      <el-table-column prop="errorTimesSum" label="总次数" align="center" show-overflow-tooltip fixed="right">
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {
  getAllChanCode,
  getAllChanNum,
  getAllNetCode,
  getNetCode,
  getMampData, getAllStaType
} from '@/api'
export default {
  name: 'Home',
  data () {
    return {
      tableData: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 10
      },
      form: {
        selectChanCode: [],
        selectChanNum: [],
        selectNetCode: [],
        selectStaType: [],
        date: ['2000-11-01 00:00:00', '2035-11-01 00:00:00'],
        continuousErrorTimesThreshold: 0,
        continuousErrorTimesLessThanSymbol: '大于等于', // 大于-false 小于-true
        daysThreshold: 2,
        errorTimesSumLessThanSymbol: '大于等于',
        errorTimesSumThreshold: 0 // 大于-false 小于-true
      },
      total: 0,
      netCode: [], // 台网码数组,用于sheet命名
      netCodeOptions: [],
      staTypeOptions: [],
      chanNumOptions: [],
      chanCodeOptions: [],
      tableTitle: [],
      // 数据加载
      tableLoading: false,
      // 下拉框的全选
      netCodeChecked: false,
      staTypeChecked: false,
      chanNumChecked: false,
      chanCodeChecked: false,
      // 设置表单验证
      netCodeNull: false,
      staTypeNull: false,
      chanNumNull: false,
      chanCodeNull: false,
      dateNull: false,
      errorTimesSumNull: false,
      continuousErrorTimesNull: false,
      daysNull: false
    }
  },
  created () {
    const dateRange = this.getDefaultDate()
    this.form.date = [dateRange[0], dateRange[1]]
    this.getBaseData()
    this.getNetCode()
  },
  methods: {
    ruleForm () {
      console.log(this.form.daysThreshold)
      if (this.form.selectNetCode.length === 0) {
        this.netCodeNull = true
        this.$notify.info({
          title: '提示',
          message: '请选择台网'
        })
        return false
      }
      this.netCodeNull = false
      if (this.form.selectStaType.length === 0) {
        this.staTypeNull = true
        this.$notify.info({
          title: '提示',
          message: '请选择台站类型'
        })
        return false
      }
      this.staTypeNull = false
      if (this.form.selectChanNum.length === 0) {
        this.chanNumNull = true
        this.$notify.info({
          title: '提示',
          message: '请选择位置号'
        })
        return false
      }
      this.chanNumNull = false
      if (this.form.selectChanCode.length === 0) {
        this.chanCodeNull = true
        this.$notify.info({
          title: '提示',
          message: '请选择通道码'
        })
        return false
      }
      this.chanCodeNull = false
      if (this.form.date === null) {
        this.dateNull = true
        this.$notify.info({
          title: '提示',
          message: '请输入日期'
        })
        return false
      }
      this.dateNull = false
      if (this.form.errorTimesSumThreshold === '') {
        this.errorTimesSumNull = true
        this.$notify.info({
          title: '提示',
          message: '请输入总次数'
        })
        return false
      }
      this.errorTimesSumNull = false
      if (this.form.continuousErrorTimesThreshold === '') {
        this.continuousErrorTimesNull = true
        this.$notify.info({
          title: '提示',
          message: '请输入异常次数'
        })
        return false
      }
      this.continuousErrorTimesNull = false
      if (this.form.daysThreshold === undefined) {
        this.daysNull = true
        this.$notify.info({
          title: '提示',
          message: '请输入连续天数'
        })
        return false
      }
      this.daysNull = false
      return true
    },
    ruleInput (index) {
      switch (index) {
        case 1 :
          this.dateNull = false
          break
        case 2:
          this.errorTimesSumNull = false
          break
        case 3:
          this.continuousErrorTimesNull = false
          break
        case 4:
          this.dateNull = false
          break
      }
    },
    async getMampData () {
      // 数据组装
      if (!this.ruleForm()) {
        return
      }
      this.tableLoading = true
      console.log(this.form.selectNetCode)
      const queryInfo = {
        ...this.pageInfo,
        netCodeList: this.form.selectNetCode,
        chanNumList: this.form.selectChanNum,
        chanCodeList: this.form.selectChanCode,
        staTypeList: this.form.selectStaType,
        startDateTime: this.form.date[0],
        endDateTime: this.form.date[1],
        continuousErrorTimesThreshold: this.form.continuousErrorTimesThreshold,
        continuousErrorTimesLessThanSymbol: this.form.continuousErrorTimesLessThanSymbol === '小于等于', // 大于-false 小于-true
        daysThreshold: this.form.daysThreshold,
        errorTimesSumThreshold: this.form.errorTimesSumThreshold,
        errorTimesSumLessThanSymbol: this.form.errorTimesSumLessThanSymbol === '小于等于' // 大于-false 小于-true
      }
      const { data: { data } } = await getMampData(queryInfo)
      this.tableData = data.records
      this.tableTitle = []
      if (data.records.length !== 0) {
        const list = data.records[0].dataList
        if (list.length !== 0) {
          this.tableTitle = list.map(item => item.date)
        }
      }
      this.total = data.total
      if (data.records.length === 0) {
        this.$notify.info({
          title: '提示',
          message: '设定时间段内无错误/异常数据'
        })
      }
      this.tableLoading = false
    },
    async getBaseData () {
      const { data: { data: data1 } } = await getAllNetCode()
      this.netCodeOptions = data1.map(item => ({ value: item, label: item }))
      const { data: { data: data2 } } = await getAllChanNum()
      this.chanNumOptions = data2.map(item => ({ value: item, label: item }))
      const { data: { data: data3 } } = await getAllChanCode()
      this.chanCodeOptions = data3.map(item => ({ value: item, label: item }))
      const { data: { data: data4 } } = await getAllStaType()
      this.staTypeOptions = data4.map(item => ({ value: item, label: item }))
      // console.log(this.netCodeOptions, this.chanNumOptions, this.chanCodeOptions)
    },
    async getNetCode () {
      const { data: { data } } = await getNetCode()
      this.netCode = data
    },
    getDefaultDate () {
      const date = new Date()// 当前时间
      const year = date.getFullYear() // 返回指定日期的年份
      const month = this.repairDate(date.getMonth() + 1)// 月
      const day = this.repairDate(date.getDate())// 日

      // 当前时间
      const endDate = year + '-' + month + '-' + day + ' ' + this.repairDate(0) + ':' + this.repairDate(0) + ':' + this.repairDate(0)

      const date2 = new Date(date)
      date2.setDate(date2.getDate() - 6)
      const year2 = date2.getFullYear() // 返回指定日期的年份
      const month2 = this.repairDate(date2.getMonth() + 1)// 月
      const day2 = this.repairDate(date2.getDate())// 日
      const startDate = year2 + '-' + month2 + '-' + day2 + ' ' + this.repairDate(0) + ':' + this.repairDate(0) + ':' + this.repairDate(0)
      const dateRange = [startDate, endDate]

      return dateRange
    },
    repairDate (i) {
      if (i >= 0 && i <= 9) {
        return '0' + i
      } else {
        return i
      }
    },
    selectAllNetCode () {
      this.form.selectNetCode = []
      if (this.netCodeChecked) {
        this.netCodeOptions.map((item) => {
          this.form.selectNetCode.push(item.value)
        })
      }
    },
    changeNetCode () {
      this.netCodeNull = false
      if (this.form.selectNetCode.length === this.netCodeOptions.length) {
        this.netCodeChecked = true
      } else {
        this.netCodeChecked = false
      }
    },
    selectAllStaType () {
      this.form.selectStaType = []
      if (this.staTypeChecked) {
        this.staTypeOptions.map((item) => {
          this.form.selectStaType.push(item.value)
        })
      }
    },
    changeStaType () {
      this.staTypeNull = false
      if (this.form.selectStaType.length === this.staTypeOptions.length) {
        this.staTypeChecked = true
      } else {
        this.staTypeChecked = false
      }
    },
    selectAllChanNum () {
      this.form.selectChanNum = []
      if (this.chanNumChecked) {
        this.chanNumOptions.map((item) => {
          this.form.selectChanNum.push(item.value)
        })
      }
    },
    changeChanNum () {
      this.chanNumNull = false
      if (this.form.selectChanNum.length === this.chanNumOptions.length) {
        this.chanNumChecked = true
      } else {
        this.chanNumChecked = false
      }
    },
    selectAllChanCode () {
      this.form.selectChanCode = []
      if (this.chanCodeChecked) {
        this.chanCodeOptions.map((item) => {
          this.form.selectChanCode.push(item.value)
        })
      }
    },
    changeChanCode () {
      this.chanCodeNull = false
      if (this.form.selectChanCode.length === this.chanCodeOptions.length) {
        this.chanCodeChecked = true
      } else {
        this.chanCodeChecked = false
      }
    },
    handleSizeChange (newSize) {
      this.pageInfo.pageSize = newSize
      this.getMampData()
    },
    handleCurrentChange (newNum) {
      this.pageInfo.pageNum = newNum
      this.getMampData()
    },
    queryData () {
      this.pageInfo.pageNum = 1
      this.pageInfo.pageSize = 10
      this.getMampData()
    },
    clearFn () {
      this.form.selectNetCode = []
      this.form.selectChanNum = []
      this.form.selectChanCode = []
      this.form.selectStaType = []
      this.form.errorTimesLessThanSymbol = '大于等于'
      this.form.continuousErrorTimesThreshold = 0
      this.form.continuousErrorTimesLessThanSymbol = '大于等于' // 大于-false 小于-true
      this.form.daysThreshold = 3
      this.form.errorTimesSumLessThanSymbol = '大于等于' // 大于-false 小于-true
      this.form.errorTimesSumThreshold = 0
      const dateRange = this.getDefaultDate()
      this.form.date = [dateRange[0], dateRange[1]]
      this.pageInfo = {
        pageNum: 1,
        pageSize: 10
      }
    },
    // 表格颜色
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      if (column.label !== '台网名称' && column.label !== '台站名称' && column.label !== '通道号' && column.label !== '通道代码' &&
        column.label !== '台站类型' && column.label !== '总次数') {
        if (row.dataList[columnIndex - 5].continuousState) {
          return 'background:#ffeb9c;color:black;padding:0px'
        } else {
          return 'background:#00FF7F;color:black;padding:0px'
        }
      }
      return 'padding:0px'
    },
    async exportExcel () {
      if (!this.ruleForm()) {
        return
      }

      this.$notify.info({
        title: '提示',
        message: '开始下载波形异常数量.xlsx文件，请稍候'
      })

      // 包裹多表数据变量定义
      const allHeader = []
      const allMerges = []
      const allData = []
      const allSheetName = []
      const dic = new Map()
      const allColorCol = []// sheet1全为空，sheet是每一行对应的需要变的颜色

      // 解决forEach异步问题
      const promiseArray = []

      const queryInfo = {
        pageNum: 1,
        pageSize: -1,
        netCodeList: [],
        chanNumList: this.form.selectChanNum,
        chanCodeList: this.form.selectChanCode,
        staTypeList: this.form.selectStaType,
        startDateTime: this.form.date[0],
        endDateTime: this.form.date[1],
        continuousErrorTimesThreshold: this.form.continuousErrorTimesThreshold,
        continuousErrorTimesLessThanSymbol: this.form.continuousErrorTimesLessThanSymbol === '小于等于', // 大于-false 小于-true
        daysThreshold: this.form.daysThreshold,
        errorTimesSumThreshold: this.form.errorTimesSumThreshold, // 大于-false 小于-true
        errorTimesSumLessThanSymbol: this.form.errorTimesSumLessThanSymbol === '小于等于'
      }
      const header = ['台网名称', '台站名称', '台站类型', '通道号', '通道代码', ...this.tableTitle, '总次数'] // 标题

      const netCodes = this.form.selectNetCode
      netCodes.push('') // 加入总表

      // 获取数据,有多个台网的，这里先做一个的测试
      netCodes.forEach(async netCode => {
        if (netCode !== '') {
          queryInfo.netCodeList = [netCode]
        } else {
          queryInfo.netCodeList = this.form.selectNetCode
        }
        const s = new Promise((resolve, reject) => {
          const sheet = {
            header: header,
            data: [],
            colorCol: []
          }
          getMampData(queryInfo).then(({ data: { data } }) => {
            // 数据组装,data数组有多长，说明就有几天的，也就是说有几行的数据
            const colLength = this.tableTitle.length

            for (let i = 0; i < colLength; i++) {
              sheet.colorCol.push([])
            }

            data.records.forEach(item => {
              var row = []
              const obj1 = JSON.parse(JSON.stringify(item, ['netCode', 'staCode', 'staType', 'chanNum', 'chanCode'], 4))
              const obj2 = item.dataList.map(date => date.times === null ? '' : date.times)
              const obj = []
              for (var a in obj1) {
                obj.push(obj1[a])
              }
              for (let i = 0; i < colLength; i++) {
                if (item.dataList[i].continuousState) {
                  sheet.colorCol[i].push('黄色')
                } else {
                  sheet.colorCol[i].push('')
                }
              }
              row = [...obj, ...obj2, item.errorTimesSum]
              sheet.data.push(row)
            })
            allMerges.push([])
            dic.set(netCode, sheet)
            // 代表本次执行完
            resolve()
          })
        })
        promiseArray.push(s)
      })

      Promise.all(promiseArray).then(() => {
        netCodes.forEach(async netCode => {
          const sheetName = netCode
          const sheet = dic.get(sheetName)
          allHeader.push(sheet.header)
          allData.push(sheet.data)
          allSheetName.push(sheetName === '' ? '总表' : sheetName) // 加入总表
          allColorCol.push(sheet.colorCol)
        })

        import('@/utils/exportAllDate').then(excel => {
          excel.export_json_to_excel({
            // header: [header],
            header: allHeader,
            // data: [[['鹿琛', '12']], [['尘世', '18']]],
            // data: [tableData],
            data: allData,
            filename: '波形异常数量',
            autoWidth: true,
            // merges: [[]],
            merges: allMerges,
            SheetNames: allSheetName,
            bookType: 'xlsx',
            colorCol: this.tableTitle,
            colorColData: allColorCol
          })
        })
      })
    },
    async exportDefaultExcel () {
      // 包裹多表数据变量定义
      const allHeader = []
      const allMerges = []
      const allData = []
      const allSheetName = []
      const dic = new Map()
      const allColorCol = []// sheet1全为空，sheet是每一行对应的需要变的颜色

      // 解决forEach异步问题
      const promiseArray = []

      const dateRange = this.getDefaultDate()

      await this.getNetCode()
      await this.getBaseData()

      const allNetCode = []
      const allChanNum = []
      const allChanCode = []
      const allStaType = []
      this.netCodeOptions.map((item) => {
        allNetCode.push(item.value)
      })
      this.chanNumOptions.map((item) => {
        allChanNum.push(item.value)
      })
      this.chanCodeOptions.map((item) => {
        allChanCode.push(item.value)
      })
      this.staTypeOptions.map((item) => {
        allStaType.push(item.value)
      })

      const queryInfo = {
        pageNum: 1,
        pageSize: -1,
        netCodeList: [],
        chanNumList: allChanNum,
        chanCodeList: allChanCode,
        staTypeList: allStaType,
        startDateTime: dateRange[0],
        endDateTime: dateRange[1],
        continuousErrorTimesThreshold: 0,
        continuousErrorTimesLessThanSymbol: false, // 大于-false 小于-true
        daysThreshold: 2,
        errorTimesSumThreshold: 0,
        errorTimesSumLessThanSymbol: false // 大于-false 小于-true
      }

      let netCodes = allNetCode
      netCodes = this.netCode
      netCodes.push('') // 加入总表
      console.log(netCodes)

      let tableTitle = []

      // 获取数据,有多个台网的，这里先做一个的测试
      netCodes.forEach(async netCode => {
        if (netCode !== '') {
          queryInfo.netCodeList = [netCode]
        } else {
          queryInfo.netCodeList = this.form.selectNetCode
        }
        const s = new Promise((resolve, reject) => {
          const sheet = {
            header: [],
            data: [],
            colorCol: []
          }
          getMampData(queryInfo).then(({ data: { data } }) => {
            // 数据组装,data数组有多长，说明就有几天的，也就是说有几行的数据
            if (data.records.length !== 0) {
              const list = data.records[0].dataList
              if (list.length !== 0) {
                tableTitle = list.map(item => item.date)
              }
            }

            const header = ['台网名称', '台站名称', '台站类型', '通道号', '通道代码', ...tableTitle, '总次数'] // 标题
            sheet.header = header

            const colLength = tableTitle.length

            for (let i = 0; i < colLength; i++) {
              sheet.colorCol.push([])
            }

            data.records.forEach(item => {
              var row = []
              const obj1 = JSON.parse(JSON.stringify(item, ['netCode', 'staCode', 'staType', 'chanNum', 'chanCode'], 4))
              const obj2 = item.dataList.map(date => date.times)
              const obj = []
              for (var a in obj1) {
                obj.push(obj1[a])
              }
              for (let i = 0; i < colLength; i++) {
                if (item.dataList[i].continuousState) {
                  sheet.colorCol[i].push('红色')
                } else {
                  sheet.colorCol[i].push('')
                }
              }
              row = [...obj, ...obj2, item.errorTimesSum]
              sheet.data.push(row)
            })
            allMerges.push([])
            dic.set(netCode, sheet)
            // 代表本次执行完
            resolve()
          })
        })
        promiseArray.push(s)
      })

      Promise.all(promiseArray).then(() => {
        netCodes.forEach(async netCode => {
          const sheetName = netCode
          const sheet = dic.get(sheetName)
          allHeader.push(sheet.header)
          allData.push(sheet.data)
          allSheetName.push(sheetName === '' ? '总表' : sheetName) // 加入总表
          allColorCol.push(sheet.colorCol)
        })

        const date = new Date()// 当前时间
        const year = date.getFullYear() // 返回指定日期的年份
        const month = this.repairDate(date.getMonth() + 1)// 月
        const day = this.repairDate(date.getDate())// 日
        const hour = this.repairDate(date.getHours())
        const fileName = year + '-' + month + '-' + day + ' ' + hour + '时_波形异常数量'

        import('@/utils/exportAllDate').then(excel => {
          excel.export_json_to_excel({
            header: allHeader,
            data: allData,
            filename: fileName,
            autoWidth: true,
            merges: allMerges,
            SheetNames: allSheetName,
            bookType: 'xlsx',
            colorCol: tableTitle,
            colorColData: allColorCol
          })
        })
      })
    }
  }
}
</script>
<style lang="css" scoped>
.page {
  margin-top: 20px;
}

/deep/ .selectNull .el-input .el-input__inner {
  border: #F34E4EFF 1px solid!important;
}

/deep/ .inputNull{
  border: #F34E4EFF 1px solid!important;
}

/deep/ .numberNull .el-input__inner{
  border: #F34E4EFF 1px solid!important;
}
</style>
